// When color definition differs for dark and light variant,
// it gets @if ed depending on $variant

@function gtkalpha($c,$a) {
  @return unquote("alpha(#{$c},#{$a})");
}

// Base colors
$base_color:                        if($variant == 'light', #ffffff, #242424);
$text_color:                        if($variant == 'light', #363636, #dadada);
$bg_color:                          if($variant == 'light', #f5f5f5, #333333);
$fg_color:                          if($variant == 'light', #242424, #dedede);
$alt_fg_color:                      if($variant == 'light', #424242, #afafaf);
$hint_fg_color:                     if($variant == 'light', #565656, #999999);

$track_color:                       if($variant == 'light', rgba(black, 0.20), rgba(white, 0.10));
$visit_color:                       if($variant == 'light', rgba(black, 0.16), rgba(white, 0.08));
$divider_color:                     if($variant == 'light', rgba(black, 0.12), rgba(white, 0.06));

$light_fg_color:                    white;
$light_alt_fg_color:                rgba(white, 0.85);
$light_hint_fg_color:               rgba(white, 0.50);
$light_disabled_fg_color:           rgba(white, 0.45);
$light_alt_disabled_fg_color:       rgba(white, 0.35);
$light_track_color:                 rgba(white, 0.30);
$light_divider_color:               rgba(white, 0.15);

$selected_fg_color:                 $light_fg_color;
$selected_bg_color:                 if($variant == 'light', #315bef, #315bef);
$primary_color:                     $selected_bg_color;

$selected_borders_color:            darken($selected_bg_color, 20%);
$borders_color:                     if($variant == 'light', rgba(black, 0.15), rgba(white, 0.12));
$borders_bottom_color:              if($variant == 'light', rgba(black, 0.27), rgba(white, 0.12));
$dark_borders_color:                if($variant == 'light', rgba(black, 0.15), rgba(black, 0.15));
$solid_borders_color:               if($variant == 'light', darken($bg_color, 15%), lighten($bg_color, 8%));
$dark_solid_borders_color:          if($variant == 'light', darken($bg_color, 15%), darken($bg_color, 5%));
$highlight_color:                   if($variant == 'light', rgba(white, 0.65), rgba(white, 0.12));

// Background colors
$dark_bg_color:                     rgba(black, 0.6);
$alt_dark_bg_color:                 rgba(black, 0.3);
$solid_bg_color:                    if($variant == 'light', #FAFAFA, #555555); // for gnome-shell keyboard
$alt_solid_bg_color:                if($variant == 'light', #E0E0E0, #242424); // for gnome-shell keyboard

// Link colors
$link_color:                        #3484e2;
$link_visited_color:                if($variant == 'light', lighten($text_color, 10%), darken($text_color, 15%));

// Theme colors
$selection_mode_bg:                 #6887cd;
$warning_color:                     #F27835;
$error_color:                       #FC4138;
$success_color:                     #71c837;
$destructive_color:                 #f8464c;
$suggested_color:                   #3484e2;

$progress_color:                    $selected_bg_color;
$drop_target_color:                 #F08437;

//insensitive state derived colors
$disabled_fg_color:                 if($variant == 'light', transparentize($fg_color, 0.55), transparentize($fg_color, 0.65));
$alt_disabled_fg_color:             if($variant == 'light', transparentize($alt_fg_color, 0.55), transparentize($alt_fg_color, 0.65));
$disabled_bg_color:                 if($variant == 'light', mix($bg_color, $base_color, 40%), lighten($bg_color, 2%));

// Headerbar colors
$header_bg:                         if($variant == 'dark', #373737, #e5e5e5);
$header_highlight:                  if($variant == 'dark', #434343, #f5f5f5);
$header_top:                        if($variant == 'dark', #434343, #e9e9e9);
$header_middle:                     if($variant == 'dark', #3e3e3e, #e2e2e2);
$header_bottom:                     if($variant == 'dark', #383838, #d2d2d2);

$header_bg_backdrop:                if($variant == 'light', #F6F6F6, #313131);
$header_border:                     if($variant == 'light', #a1a1a1, #101010);

$header_fg:                         if($variant == 'light', #575757, #FDFDFD);

// Sidebar colors
$dark_sidebar_bg: white;

@if $trans=='true' and $variant=='light' {
  $dark_sidebar_bg:                 transparentize(#f6f6f6, 0.06);
}

@if $trans=='false' and $variant=='light' {
  $dark_sidebar_bg:                 #f6f6f6;
}

@if $trans=='true' and $variant=='dark' {
  $dark_sidebar_bg:                 transparentize(#3B3B3B, 0.05);
}

@if $trans=='false' and $variant=='dark' {
  $dark_sidebar_bg:                 #3B3B3B;
}

$dark_sidebar_fg:                   $text_color;
$dark_sidebar_border:               if($variant == 'light', darken(opacify($dark_sidebar_bg, 1), 5%), lighten(opacify($dark_sidebar_bg, 1), 5%));
$sidebar_theme_color:               if($variant == 'light', rgba(#000000, 0.15), rgba(#C7C7C7, 0.25));

//OSD colors
$osd_fg_color:                      #dadada;
$osd_bg_color:                      #2a2a2a;
$osd_button_bg:                     rgba(lighten($osd_bg_color, 22%), 0.96);
$osd_button_border:                 $dark_borders_color;
$osd_entry_bg:                      rgba(lighten($osd_bg_color, 22%), 0.96);
$osd_entry_border:                  $dark_borders_color;
$osd_disabled_bg_color:             darken($osd_bg_color, 3%);
$osd_disabled_fg_color:             mix($osd_fg_color, opacify($osd_bg_color, 1), 30%);
$osd_borders_color:                 $borders_color;

// Menu colors
$menu_bg:                           if($variant == 'light', $base_color, $bg_color);
$menu_bd:                           if($variant == 'light', rgba(black, 0.05), rgba(white, 0.08));

@if $trans == 'true' {
  $menu_bg:                         if($variant == 'light', rgba($base_color, 0.95), rgba($bg_color, 0.95));
}

// Panel colors
$panel_bg:                          if($variant == 'light', #f1f1f1, #2a2a2a);

@if $trans == 'true' {
  $panel_bg:                        if($variant == 'light', rgba(#f1f1f1, 0.85), rgba(#2a2a2a, 0.85));
}

$panel_fg:                          $text_color;
$panel_top_color:                   if($variant == 'dark', #333333, #f5f5f5);
$panel_bottom_color:                if($variant == 'dark', #2a2a2a, #e2e2e2);
$panel_border_color:                if($variant =='light', rgba(black, 0.2), rgba(black, 0.72));

// Entry colors
$entry_bg:                          if($variant == 'light', $base_color, lighten($base_color, 0%));
$entry_border:                      $borders_color;
$entry_bottom_border:               $borders_bottom_color;
$entry_highlight:                   if($variant == 'light', rgba(#67a4e9, 0.75), rgba($selection_mode_bg, 0.75));

// Button colors
$button_bg:                         if($variant == 'light', white, #656565);
$button_active_top:                 if($variant == 'light', #7ba3f7, #3d6be3);
$button_active_bottom:              if($variant == 'light', #3d6ffc, #3861ca);
$button_active_hover_top:           if($variant == 'light', #82a8f7, #3b65e3);
$button_active_hover_bottom:        if($variant == 'light', #4675f7, #365cca);

$button_border:                     $borders_color;
$button_bottom_border:              $entry_bottom_border;
$button_active_border:              #487afa;
$button_active_top_border:          #6290f7;
$button_active_bottom_border:       #3767fc;

$header_button_bg:                  if($variant == 'dark', lighten($header_bg, 15%), white);
$header_button_hover_bg:            if($variant == 'dark', lighten($header_bg, 25%), #fafafa);
$header_button_active_bg:           if($variant == 'dark', lighten($header_bg, 35%), #888888);
$header_button_checked_bg:          if($variant == 'dark', lighten($header_bg, 45%), #686868);

// Button borders and highlights colors
$button_highlight:                  if($variant == 'light', white, rgba(white, 0.1));

$button_borders:                    if($variant == 'light', $button_border, $dark_borders_color);
$button_borders_top:                if($variant == 'light', $button_border, $dark_borders_color);
$button_borders_bottom:             if($variant == 'light', $button_bottom_border, $dark_borders_color);

$button_borders_hover:              if($variant == 'light', $button_border, $dark_borders_color);
$button_borders_hover_top:          if($variant == 'light', $button_border, $dark_borders_color);
$button_borders_hover_bottom:       if($variant == 'light', $button_bottom_border, $dark_borders_color);

$button_borders_active:             if($variant == 'light', $button_active_border, $dark_borders_color);
$button_borders_active_top:         if($variant == 'light', $button_active_top_border, $dark_borders_color);
$button_borders_active_bottom:      if($variant == 'light', $button_active_bottom_border, $dark_borders_color);

$header_button_highlight:           if($variant == 'light', white, #767676);
$header_button_hover_highlight:     if($variant == 'light', white, #868686);
$header_button_checked_highlight:   if($variant == 'light', $borders_color, #cecece);

// Images
$button_active_image:               linear-gradient(0deg, $button_active_bottom 0%, $button_active_top 100%);
$button_active_hover_image:         linear-gradient(0deg, $button_active_hover_bottom 0%, $button_active_hover_top 100%);

$headerbar_bg_image:                linear-gradient(0deg, $header_bottom 0%, $header_middle 50%, $header_top 100%);
$headerbar_top_image:               linear-gradient(0deg, $header_middle 0%, $header_top 100%);
$header_button_image:               if($variant == 'light',
                                    linear-gradient( 0deg, #f1f1f1 0%, #fdfdfd 95%, #fefefe 100%),
                                    linear-gradient( 0deg, #636363 0%, #696969 100%));
$header_button_hover_image:         if($variant == 'light',
                                    linear-gradient( 0deg, #f8f8f8 0%, #ffffff 100%),
                                    linear-gradient( 0deg, #707070 0%, #767676 100%));
$header_button_checked_image:       if($variant == 'light',
                                    linear-gradient( 0deg, #656565 0%, #707070 100%),
                                    linear-gradient( 0deg, #c1c1c1 0%, #c6c6c6 100%));

$menubar_bg_image:                  linear-gradient(0deg, $header_bottom 0%, $header_middle 100%);

// WM colors
$wm_border_light: 0 0 0 2px rgba(black, 0.03), 0 0 0 1px rgba(black, 0.12);
$wm_border_dark: 0 0 0 2px rgba(black, 0.1), 0 0 0 1px rgba(black, 0.75);
$wm_shadow: if($variant=='light', rgba(black, 0.15), rgba(black, 0.35));
$wm_border: if($variant=='light', $wm_border_light, $wm_border_dark);

// WM Buttons

// Close
$wm_button_close_bg:                if($variant == 'light', #f46067, #cc575d);
$wm_button_close_hover_bg:          if($variant == 'light', #f68086, #d7787d);
$wm_button_close_active_bg:         if($variant == 'light', #f13039, #be3841);

$wm_icon_close_bg:                  if($variant == 'light',#F8F8F9 , #2f343f);

// Minimize, Maximize
$wm_button_hover_bg:                if($variant == 'light', #fdfdfd, #454C5C);
$wm_button_active_bg:               $selected_bg_color;

$wm_button_hover_border:            if($variant == 'light', #D1D3DA, #262932);

$wm_icon_bg:                        if($variant == 'light', #90949E, #90939B);
$wm_icon_unfocused_bg:              if($variant == 'light', #B6B8C0, #666A74);
$wm_icon_hover_bg:                  if($variant == 'light', #7A7F8B, #C4C7CC);
$wm_icon_active_bg:                 white;
